<template>
  <div>
    <div>
        <el-row v-for="item in articles" v-bind:key="item.id" style="border-bottom: 1px solid #666;text-align: left;padding-bottom: 20px;">
            <el-col :span="20">
                <h3 @click="getArticle(item.id)">
                    {{item.title}}
                </h3>
                <div>
                    {{item.content}}
                </div>
            </el-col>
            <el-col :span="4">
                <img :src="item.imgUrl" width="100" height="100" alt="">
            </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'List',
  data(){
      return {
          articles:[]
      }
  },
  mounted(){
      this.getArticles();
  },
  methods:{
      getArticle(id){
          console.log(id);
          this.$router.push({ name:'article',params:{id:id} })
      },
      getArticles(){
          // 向给定ID的用户发起请求
            this.$axios.get('/api/list')
            .then((data)=>{
                this.articles = data.data;
            })
            .catch( (error) => {
                // 处理错误情况
                console.log(error);
            });
      }
  }
}
</script>

<style>

</style>
